import { Outlet } from 'react-router-dom'
import { Layout, Row, Avatar, Space } from 'antd'
import { DownOutlined, UserOutlined } from '@ant-design/icons'
import Menu from '@/components/Menu/Menu'
import './LayoutStyle.less'

const { Sider } = Layout

function LayoutView() {
  return (
    <Layout>
      <Sider theme="light">
        <br />
        <Row align="middle" justify="space-around">
          <Space>
            <img className="left-sider-logo" src="/static/img/logo_only.png" alt="" />
            <h1 className="left-sider-logo-text">demo</h1>
          </Space>
        </Row>
        <br />
        <Row justify="start" align="middle">
          <Space className="user-name-row">
            <Avatar icon={<UserOutlined />} />
            admin
            <DownOutlined />
          </Space>
        </Row>
        <br />
        <Menu />
      </Sider>
      <Layout className="right-content">
        <Outlet />
      </Layout>
    </Layout>
  )
}

export default LayoutView
